<template>
  <div class="program">
    <div class="addprogram">
      <el-button type="primary" @click="handleDailogVisible">新增栏目</el-button>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" width="650px" :title="dialog.edit ? '编辑栏目' : '新增栏目'" class="dialog">
      <el-form :model="program" :rules="rules" ref="addProgramForm">
        <el-form-item :label-width="formLabelWidth" label="栏目名称" prop="name">
          <el-input v-model="program.name"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="父栏目">
          <el-select v-model="program.parentId" @change="check">
            <el-option
              v-for="item in parentProgarm"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <div v-if="message" style="color: red">{{ message }}</div>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="SEO标题">
          <el-input v-model="program.seoTitle"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="SEO关键字">
          <el-input v-model="program.seoKeyword"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="SEO描述">
          <el-input v-model="program.seoDesc"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="启用">
          <el-radio-group v-model="program.published">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="program.id" style="text-align: left" @click="deleteProgram">删除</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addProgram">保存</el-button>
      </div>
    </el-dialog>
    <el-table
      :table-label="programLabel"
      :table-data="programData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      :list-loading="listLoading"
      style="margin-top:20px;"
      @handleGoods="handleGoods"
    >
      <el-table-column slot="button" :min-width="1" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleCLick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
  import ElTable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import {scrollTo} from '@/utils/scrollTo' // 上下滑动组件
  import {addCategory, deleteCategory, getCategory, updateCategory} from '@/api/operate/information' // 接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      ElTable,
      Pagination,
      scrollTo
    },
    data() {
      return {
        message: '',
        parentProgarm: [],
        program: {
          id: '',
          title: '',
          seoTitle: '',
          seoDesc: '',
          seoKeyword: '',
          published: 1,
          parentId: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        listLoading: false,
        total: 10,
        currentpage: 1,
        pagesize: 10,
        programLabel: [
          {
            label: '栏目名称', width: '2', prop: 'name'
          },
          {
            label: '栏目地址', width: '3', prop: 'url', isopera: true
          },
          {
            label: '编码', width: '2', prop: 'code'
          }
          ,
          {
            label: '状态', width: '1', prop: 'published'
          }
        ],
        programData: [],
        dialog: {
          add: false,
          edit: false,
        },
        rules: {
          name: [
            {required: true, message: '请输入栏目名称', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getCategory(getTenantId()).then(res => {
          this.programData = res.data.items
          this.parentProgarm = res.data.items
          this.parentProgarm.map(item => {
            if (item.published === 1) item.published = '开启';
            if (item.published === 0) item.published = '关闭';
          })
          this.total = res.data.items.length
        })
      },
      check() {
        if (this.program.parentId && this.program.parentId === this.program.id) {
          this.message = '父栏目不能为自己！'
        } else {
          this.message = ''
        }
      },
      // 新增栏目提交
      addProgram() {
        this.$refs['addProgramForm'].validate((valid) => {
          if (valid) {
            if (this.program.id) {
              updateCategory(this.program).then(() => {
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success',
                  duration: 2000
                })
                this.getData()
              })
            } else {
              this.program.tenantId = getTenantId()
              addCategory(this.program).then(() => {
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success',
                  duration: 2000
                })
                this.getData()
              })
            }
            this.dialogFormVisible = false
          }
        })


      },
      deleteProgram() {
        deleteCategory(this.program.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
        this.dialogFormVisible = false
      },
      // 打开新增栏目
      handleDailogVisible() {
        this.dialog.add = true;
        this.dialog.edit = false;
        this.dialogFormVisible = true;
        this.program = {
          id: '',
          title: '',
          seoTitle: '',
          seoDesc: '',
          seoKeyword: '',
          published: 1,
          parentId: ''
        }
      },
      handleGoods() {
      },
      // 列表编辑按钮
      handleCLick(row) {
        this.dialog.add = false;
        this.dialog.edit = true;
        this.dialogFormVisible = true;
        if (row.published === '开启') row.published = 1;
        if (row.published === '关闭') row.published = 0;
        this.program = Object.assign({}, row)
      },
      handleSizeChange(val) {
        this.currentpage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      }
    }
  }
</script>

<style lang="scss">
  .program {
    .dialog {
      .el-dialog {
        border-radius: 10px;
      }

      .el-input {
        width: 300px;
      }

      .el-dialog__header {
        border-bottom: 1px solid #f1f1f1;
      }
    }

    .addprogram {
      width: 100%;
      height: 36px;
      margin-bottom: 21px;

      .el-button {
        float: right;
      }
    }
  }
</style>
